<template>
  <div class="min-h-screen pb-20">
    <!-- 标题栏 -->
    <header class="sticky top-0 z-10 bg-white shadow-sm py-4 px-4">
      <h1 class="text-lg font-medium text-gray-800 text-center">在线支付</h1>
    </header>

    <div class="pb-20 px-4">
      <!-- 订单信息 -->
      <div class="py-3">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">订单信息：</h3>

        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
          <!-- 订单摘要 -->
          <div
              @click="toggleOrderDetails"
              class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors"
          >
            <div class="flex items-center space-x-2">
              <span class="font-medium text-gray-800">{{ orderInfo.businessName }}</span>
              <span
                  class="text-gray-500 transition-transform duration-200"
                  :class="{ 'rotate-180': showOrderDetails }"
              >›</span>
            </div>
            <span class="text-lg font-bold text-red-500">¥{{ orderInfo.totalAmount }}</span>
          </div>

          <!-- 订单详情 -->
          <div
              v-if="showOrderDetails"
              class="border-t border-gray-100 bg-gray-50"
          >
            <div
                v-for="item in orderInfo.items"
                :key="item.id"
                class="flex items-center justify-between px-4 py-3 border-b border-gray-100 last:border-b-0"
            >
              <span class="text-gray-700">{{ item.name }} × {{ item.quantity }}</span>
              <span class="text-gray-800 font-medium">¥{{ item.price }}</span>
            </div>
            <div class="flex items-center justify-between px-4 py-3">
              <span class="text-gray-600">配送费</span>
              <span class="text-gray-600">¥{{ orderInfo.deliveryFee }}</span>
            </div>
            <div class="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-white">
              <span class="font-medium">总计</span>
              <span class="font-bold text-red-500">¥{{ orderInfo.totalAmount }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付方式 -->
      <div class="py-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">选择支付方式：</h3>

        <div class="space-y-4">
          <!-- 支付宝 -->
          <div
              @click="selectPaymentMethod('alipay')"
              class="bg-white rounded-lg p-4 flex items-center justify-between cursor-pointer hover:shadow-md transition-shadow"
              :class="{ 'ring-2 ring-blue-500': selectedPaymentMethod === 'alipay' }"
          >
            <div class="flex items-center space-x-4">
              <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
                <span class="text-white font-bold">支</span>
              </div>
              <div>
                <span class="font-medium text-gray-800 block">支付宝</span>
                <span class="text-gray-500 text-sm mt-1">推荐支付宝用户使用</span>
              </div>
            </div>
            <div
                v-if="selectedPaymentMethod === 'alipay'"
                class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center"
            >
              <span class="text-white text-xs">✓</span>
            </div>
          </div>

          <!-- 微信支付 -->
          <div
              @click="selectPaymentMethod('wechat')"
              class="bg-white rounded-lg p-4 flex items-center justify-between cursor-pointer hover:shadow-md transition-shadow"
              :class="{ 'ring-2 ring-green-500': selectedPaymentMethod === 'wechat' }"
          >
            <div class="flex items-center space-x-4">
              <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center">
                <span class="text-white font-bold">微</span>
              </div>
              <div>
                <span class="font-medium text-gray-800 block">微信支付</span>
                <span class="text-gray-500 text-sm mt-1">推荐微信用户使用</span>
              </div>
            </div>
            <div
                v-if="selectedPaymentMethod === 'wechat'"
                class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center"
            >
              <span class="text-white text-xs">✓</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付按钮 -->
      <div class="fixed bottom-20 left-0 right-0 px-4">
        <button
            @click="confirmPayment"
            :disabled="!selectedPaymentMethod"
            class="w-full py-3 rounded-lg font-medium text-lg transition-colors shadow-lg"
            :class="selectedPaymentMethod
            ? 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700'
            : 'bg-gray-300 text-gray-500 cursor-not-allowed'"
        >
          确认支付 ¥{{ orderInfo.totalAmount }}
        </button>
      </div>
    </div>

    <!-- 底部导航 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import FooterNav from './FooterNav.vue'

interface OrderItem {
  id: number
  name: string
  quantity: number
  price: number
}

interface OrderInfo {
  id: number
  businessName: string
  totalAmount: number
  deliveryFee: number
  items: OrderItem[]
  orderTime?: string
  address?: string
}

const router = useRouter()
const route = useRoute()

const showOrderDetails = ref(false)
const selectedPaymentMethod = ref<string>('')


// 订单数据 - 模拟订单列表
const allOrders = ref<OrderInfo[]>([
  {
    id: 1,
    businessName: '万家饺子（软件园E18店）',
    totalAmount: 49,
    deliveryFee: 3,
    items: [
      { id: 1, name: '纯肉鲜肉水饺', quantity: 2, price: 18 },
      { id: 2, name: '玉米鲜肉水饺', quantity: 1, price: 20 }
    ],
    orderTime: '2023-12-15 18:30',
    address: '沈阳市浑南区智慧四街1-121号'
  },
  {
    id: 2,
    businessName: '小锅饭豆腐馆（全运店）',
    totalAmount: 61,
    deliveryFee: 3,
    items: [
      { id: 1, name: '小锅米线', quantity: 2, price: 10 },
      { id: 2, name: '铜锅油焖鸡', quantity: 1, price: 38 }
    ],
    orderTime: '2023-12-15 19:15',
    address: '沈阳市浑南区创新路58号'
  }
])

// 从路由参数获取订单ID
const orderId = computed(() => Number(route.query.orderId))

// 当前显示的订单信息
const orderInfo = ref<OrderInfo>({
  id: 0,
  businessName: '加载中...',
  totalAmount: 0,
  deliveryFee: 0,
  items: []
})

// 加载订单数据
onMounted(() => {
  loadOrderData()
})

// 根据URL参数加载订单数据
const loadOrderData = () => {
  if (!orderId.value) {
    orderInfo.value = allOrders.value[0] || {}
    return
  }

  const foundOrder = allOrders.value.find(order => order.id === orderId.value)

  if (foundOrder) {
    orderInfo.value = { ...foundOrder }
  } else {
    // 如果没有找到订单，使用默认数据
    orderInfo.value = allOrders.value[0] || {
      id: orderId.value,
      businessName: '未知商家',
      totalAmount: 0,
      deliveryFee: 0,
      items: []
    }
  }
}

const toggleOrderDetails = () => {
  showOrderDetails.value = !showOrderDetails.value
}

const selectPaymentMethod = (method: string) => {
  selectedPaymentMethod.value = method
}

const confirmPayment = () => {
  if (!selectedPaymentMethod.value) {
    alert('请选择支付方式')
    return
  }

  // 模拟支付处理
  alert(`使用${selectedPaymentMethod.value === 'alipay' ? '支付宝' : '微信支付'}支付成功！\n订单号：${orderInfo.value.id}\n金额：¥${orderInfo.value.totalAmount}`)

  // 导航到支付成功页面
  router.push({
    name: 'PaymentSuccess',
    query: {
      orderId: orderInfo.value.id,
      amount: orderInfo.value.totalAmount
    }
  })
}
</script>